<template>
    <el-dialog :model-value="dialogVisible" :close-on-click-modal="true" :before-close="handleClose" title="导入"
        append-to-body width="520px">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="0px">
            <div style="margin-top:-20px;margin-bottom: 10px;" v-if="showDown">
                <el-button type="primary" link :loading="downLoading" @click="downLoad">下载导入模板</el-button>
            </div>
            <el-form-item prop="file" class="upload-box">
                <el-upload class="upload-demo" ref="upload" multiple :accept="acceptOption" :action="actionUrl"
                    :with-credentials="true" :http-request="httpRequest" :on-preview="handlePreview"
                    :on-remove="handleRemove" :on-change="fileChange" :on-success="upFile">
                    <el-button slot="trigger" type="primary">选取文件</el-button>
                    <div slot="tip" class="el-upload__tip" style="display: inline-block;margin-left: 20px">只能上传{{
                        acceptOption }}格式的 excel文件</div>
                </el-upload>
                <a :href="templateUrl" v-if="templateUrl != ''" :download="templateName" class="downLoad-btn">下载模板</a>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button :loading="loading" type="primary" @click="submit()">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
defineOptions({
    name: 'ImportForm',
    autoImport: true
})
const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false
    },
    showDown: {
        type: Boolean,
        default: false
    },
    autoUpload: {
        type: Boolean,
        default: false
    },
    acceptOption: {
        type: String,
        default: ''
    },
    actionUrl: {
        type: String,
        default: ''
    },
    limit: {
        type: Number,
        default: 1
    },
    downLoading: {
        type: Boolean,
        default: false
    },
    templateUrl: {
        type: String,
        default: ''
    },
    templateName: {
        type: String,
        default: ''
    },

})

const emit = defineEmits(['on-submit', 'handleClose', 'downFile'])
const formRef = ref(null)
const form = ref({})
const rules = []
const loading = ref(false)

const upload = ref()
const dataList = ref([])

const handlePreview = (file) => {
    console.log('handlePreview', file)
}

const handleRemove = (file, fileList) => {
    let fileObj = fileList// 相当于input里取得的files
    // let fd = new FormData()// FormData 对象
    // fd.append('file', fileObj)// 文件对象
    form.value.file = fileObj
}

const fileChange = (file, fileList) => {
    // console.log(file.raw)
    dataList.value = fileList
}


const upFile = (file) => {
    console.log('file', file)
}

const httpRequest = (param) => {
    let fileObj = param.file // 相当于input里取得的files
    form.value.file = fileObj
}

const handleClose = () => {
    upload.value.clearFiles()
    formRef.value.resetFields()
    emit('handleClose', false)
}
const submit = () => {
    if (!formRef) return
    formRef.value.validate(valid => {
        if (valid) {
            const fieldObj = { ...form.value }
            if (fieldObj.file) {
                emit('on-submit', fieldObj)
                handleClose()
            } else {
                ElMessage({
                    type: 'error',
                    message: '请选择要导入的文件!'
                });
            }

        } else {
            return false
        }
    })
}

const downLoad = () => {
    emit('downFile')
}
</script>

<style lang="scss" scoped>
.dialog-footer {
    text-align: right;
}

.fileBox {
    align-content: center;
    justify-content: space-between;
}
</style>
<style lang="scss">
.upload-box {
    .el-form-item__content {
        display: flex;
        align-items: flex-start;

        .downLoad-btn {
            color: #0049ad;
            margin-top: 5px;
            margin-left: 20px;
        }
    }
}
</style>
